﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="TagTemplate">
    <h2><DemoNavLink Link="TagBox#TagTemplate" />TagBox - Tag Template</h2>
    <p>
        This demo illustrates how to use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.TagTemplate">TagTemplate</a> property to customize tag's appearance.
    </p>
    <p>
        The template’s <b>Context</b> parameter has the following properties:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.TagInfo-1.DataItem">DataItem</a> - The tag’s bound data item (if the tag is not custom).</li>
        <li><a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.TagInfo-1.IsCustom">IsCustom</a> -Returns whether the current tag is custom (not stored in the assigned data source).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.TagInfo-1.RemoveTagAction">RemoveTagAction</a> - The predefined action that removes the tag.</li>
        <li><a class="helplink" target="_blank" href=" https://docs.devexpress.com/Blazor/DevExpress.Blazor.TagInfo-1.Text">Text</a> - The tag’s text. </li>
    </ul>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select items or type custom tags"/>
    </div>
    <div class="card-body mw-480">
        <DxTagBox Data="@DataSource"
                  TextFieldName="@nameof(City.CityName)"
                  TData="City"
                  TValue="City"
                  AllowCustomTags="true"
                  @bind-Tags="@Tags"
                  SizeMode="SizeMode">
            <TagTemplate Context="tagInfo">
                @{
                    var styleMode = tagInfo.IsCustom ? ButtonRenderStyleMode.Contained: GetModeByID(tagInfo.DataItem.CountryId);
                    var style = tagInfo.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
                    <DxButton RenderStyle="@style"
                              RenderStyleMode="@styleMode"
                              Text="@tagInfo.Text"
                              style="display:inline-block">
                        @context
                        <span @onclick="@tagInfo.RemoveTagAction">&times;</span>
                    </DxButton>
                }
            </TagTemplate>
        </DxTagBox>
    </div>
</div>


<CodeSnippet_Editor_TagBox_TagTemplate></CodeSnippet_Editor_TagBox_TagTemplate>


@code {
    ButtonRenderStyleMode GetModeByID(int countryId) {
        switch (countryId) {
            case 0: return ButtonRenderStyleMode.Contained;
            case 1: return ButtonRenderStyleMode.Outline;
            default: return ButtonRenderStyleMode.Text;
        }
    }

    List<City> DataSource { get; set; }

    IEnumerable<string> Tags { get; set; }

    protected override void OnInitialized() {
        base.OnInitialized();
        DataSource = CountryCity.Cities;
        Tags = new List<string>() { "Los Angeles", "Tokyo", "Moscow" };
    }
}
